<script setup>

import SettingHeader from "@/components/SettingHeader.vue";
import {ref} from "vue";
import axios from "axios";
import {useUserStore} from "@/stores/UserStore.js";

const title = ref("个人信息")

const userStore = useUserStore()
const handleFileChange = async (event) => {
  const file = event.target.files[0]; // 获取第一个文件
  const errorMessage = ref("");

  if (file) {
    try {
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append('file', file); // 将文件添加到 FormData
      // 使用 axios 发送文件到后端
      const response = await axios.post('http://localhost:8081/upload/Header', formData, {
        headers: {
          'Content-Type': 'multipart/form-data', // 设置请求头
        },
        params: {
          id: userStore.getUserInfo.id,
        }
      });
      console.log(response.data)
      // 处理后端响应
      if (response.data === true) {
        userStore.login((await axios.get("http://localhost:8081/user/login", {
          params: {
            phone: userStore.getUserInfo.phone,
            password: userStore.getUserInfo?.password,
            msg: true,
            code: (await axios.get("http://localhost:8081/user/code")).data
          }
        })).data)
      }
    } catch (error) {
      errorMessage.value = '请求失败：' + error.message;
    }
  } else {
    errorMessage.value = '请选择一个文件';
  }
};

const post = async (name, signature) => {
  if ((await axios.post("http://localhost:8081/user/update", {
    name: name || userStore.getUserInfo.name,
    signature: signature || userStore.getUserInfo.signature,
    id: userStore.getUserInfo.id,
  }, {
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })).data) {
    const tempUser = userStore.getUserInfo
    tempUser.name = name || userStore.getUserInfo.name
    tempUser.signature = signature || userStore.getUserInfo?.signature
    userStore.login(tempUser)
  }
}

const name = async (event) => {
  await post(event.target.value, null)
}

const signature = async (event) => {
  await post(null, event.target.value)
}
</script>

<template>
  <SettingHeader :title = "title" :url = "{name:'setting'}" />
  <form action = "" class = "" enctype = "multipart/form-data">
    <label for = "file" class = "d-flex mt-3 border p-2">
      <span class = "t1">我的头像</span> <span class = "block"><img
        :src = "userStore.getUserInfo.userAvatar" width = "52" height = "52"
        alt = ""></span>
    </label>
    <label for = "name" class = "d-flex border p-2">
      <span class = "t2">昵称</span> <span class = "input"><input id = "name" @change = "name" type = "text"
                                                                  :value = "userStore.getUserInfo.name"></span>
    </label>
    <label for = "self" class = "d-flex border p-2">
      <span class = "t2">个性签名</span> <span class = "input"><input id = "self" @change = "signature" type = "text"
                                                                      :value = "userStore.getUserInfo.signature"></span>
    </label>

    <label for = "gender" class = "d-flex mt-2 border p-2" @click = "">
      <span class = "t2">性别</span> <span class = "input"><input id = "self" type = "text"></span>
    </label>
    <input type = "file" @change = "handleFileChange" id = "file" name = "file" style = "visibility: hidden">
  </form>
</template>

<style scoped>
form {
  position: relative;
}

label {
  margin: auto;
  width: 98%;
  position: relative;
}

.block {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid #ddd;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.block img {
  position: absolute;
  left: 5px;
  top: 5px;
}

.t1 {
  line-height: 62px;
}

label span:nth-child(2) {
  position: absolute;
  right: 4%;
}

input {
  width: 160px;
  background-color: transparent;
  border: none;
  outline: none;
  text-align: right;
  transition: border-bottom ease 0.2s;
}

input:focus {
  border-bottom: 1px solid #ddd;
}

.option {
  margin: auto;
  position: absolute;
  width: 100%;
  border: 1px solid black;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.opUl {
  margin: 0;
  padding: 0;
}

.opList {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 48px;
}
</style>